<#macro friendHint>
	<script type="text/javascript">
		function removeHintFriend(selector){
			jQuery(selector).next("div.w6").remove();
			jQuery(selector).next("div.w3").remove();
			jQuery(selector).next("div.w6").remove();
			jQuery(selector).fadeOut();
		}
		
		function followHintFriend(id, selector){
			UserManagerExt.addFriend(id, function(result) {
				if (result != -1) {
					jQuery(selector).next("div.w6").remove();
					jQuery(selector).next("div.w3").remove();
					jQuery(selector).next("div.w6").remove();
					jQuery(selector).fadeOut();
				}
			});
		}
	</script>
	<#if (data.potentialFriends?? && data.potentialFriends?size>0)>
		<div class="question">
	  		<h1>Có thể bạn biết</h1>
			<div class="dem2"></div>
		</div>
		<#list data.potentialFriends as friend>
			<#assign avatar="${rc.contextPath}/images/avatar.png"/>
			<#if friend.avatar??>
				<#assign avatar=friend.avatar/>
			</#if>
			<div class="hintFriend" id="hintFriend_${friend_index}">
		  		<div class="avatar"><a href="${rc.contextPath}/${friend.username}"><img src="${avatar}" alt="${friend.username}" width="50" height="50"></a></div>
		  		<div class="infofriend">
		  			<a class="friendname" href="${rc.contextPath}/${friend.username}">${friend.username}</a>
		  			<#if (friend.mutualFriends?? && friend.mutualFriends?size>0)>
		    		<div class="text">Có chung ${friend.mutualFriends?size} bạn bè</div>
		    		</#if>
		    		${friend.loggined?string('<div class="on">ONLINE</div>','<div class="off">OFFLINE</div>')}	    		
		  		</div>
				<a href="javascript:followHintFriend(${friend.id},'#hintFriend_${friend_index}');" class="followFriend">KẾT BẠN</a>
          		<a href="javascript:removeHintFriend('#hintFriend_${friend_index}');" class="commentDelete deleteMutualFriend"></a>
			</div>
			<#if friend_has_next>
			<div class="w6"></div>
		    <div class="w3"></div>
		    <div class="w6"></div>
		    </#if>
		</#list>
	</#if>
</#macro>